﻿<!DOCTYPE html>
<html>
<head>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

	<!-- Stylesheets -->
	<link href="css/default.css" rel="stylesheet" type="text/css">

	<!-- Javascripts -->
	<script src="js/jquery.js"></script>
	<script src="js/cre-application.jquery.js"></script>
	<title>Creatision</title>
</head>
<body>
	<!-- MAIN CONTAINER -->
	<div id="cre_main_container">
		<!-- HEADER SECTION START -->
		<div id="cre_header">
			<!-- TOP SECTION IN HEADER -->
			<div id="cre_header_top">
				<!-- LOGO -->
				<div id="cre_header_top_logo"><img width="180" src="images/logo_creatision.png" /></div>
				<!-- TOP NAVIGATION -->
				<div id="cre_header_top_topnavi">
					<ul>
						<li class="first"><a href="#">Registrieren</a></li>
						<li><a href="#">Anmelden</a></li>
						<li class="facebook last"><a href="#">Anmelden</a></li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<!-- TOP HEADLINES -->
			<div id="cre_header_headlines">
				<div id="cre_header_headlines_intro">
					<h1 class="black-bg font-weight-800">
						<span class="line-01">Realisiere endlich deine Vision -</span><br />
						<span class="line-02">und verwirkliche dich selbst.</span>
					</h1>
					<h2 class="text-center">Du hast die absolute Freiheit.</h2>
					<div class="clear"></div>
				</div>
			</div>
			<!-- PROGRAM DEFINITION WITH BIG BULLETS -->
			<div id="cre_header_program">
				<div class="program"><img width="250" src="images/creatision-deine-vision.png" /><h4 class="program-txt text-center open-sans font-weight-300">Deine<br /><span class="font-weight-600">Vision</span></h4>
					<div class="cre_lightbox">
						<h3 class="font-weight-600">Deine Vision</h3>
						<center><img src="images/content/deine-vision.jpg" /></center>
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
						<a href="#" class="button red right">Weiter...</a>
					</div>
				</div>
				<div class="program-arrow first"></div>
				<div class="program"><img width="250" src="images/creatision-einfach-gestalten.png" /><h4 class="program-txt text-center open-sans font-weight-300">Einfach<br /><span class="font-weight-600">gestalten</span></h4></div>
				<div class="program-arrow second"></div>
				<div class="program last"><img width="250" src="images/creatision-dein-produkt.png" /><h4 class="program-txt text-center open-sans font-weight-300">Dein<br /><span class="font-weight-600">Produkt</span></h4></div>
				<div class="clear"></div>
			</div>
		</div>
		<!-- HEADER SECTION END -->

		<!-- CREATE CREATISION -->
		<div id="cre_create">
			<div id="cre_create_inner">			
				<h3>Jetzt kostenlos <a href="#" class="button red big">creatision</a> erstellen</h3>
			</div>
		</div>

		<!-- CONTENT BEGIN -->
		<div id="cre_content_wrapper">
			<div id="cre_content_inner">
				<div class="cre_content width-100">
					<h3 class="text-center">Die <span class="font-weight-600">neuesten</span> Creatisions</h3>
					<div class="cre_news_col">
						<h4>Rennholz</h4>
						<img src="images/content/rennholz.jpg" />
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
					</div>
					<div class="cre_news_col">
						<h4>Ziiiro Gravity</h4>
						<img src="images/content/ziiiro.jpg" />
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
					</div>
					<div class="cre_news_col right">
						<h4>Der Bleistift-Spitzer-Ventilator</h4>
						<img src="images/content/ventilator.png" />
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!-- CONTENT END -->

		<!-- FOOTER BEGIN -->
		<div id="cre_footer_wrapper">
			<div id="cre_footer">
				<div id="cre_footer_copyright">&copy; 2012 creatision GmbH</div>
				<div id="cre_footer_navi">
					<ul>
						<li><a href="#">Impressum</a></li>
						<li><a href="#">FAQ</a></li>
						<li><a href="#">Kontakt</a></li>
						<li><a href="#">AGB</a></li>
						<li><a href="#">Datenschutz</a></li>
						<li><a href="#">Über creatision</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- FOOTER END -->

	</div>

	<div id="cre_overlay"></div>
</body>
</html>